<template>
  <div>
    <!-- <h3>当前最新的count值为：{{count}}</h3> -->
    <h3>{{showNum}}</h3>
    <button @click="reduc">-1</button>
    <button @click="reducN(2)">-N</button>
    <button @click="reducAsync">-1 Async</button>
    <button @click="reducNAsync(4)">-N Async</button>
  </div>
</template>
<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex"
export default {
  data() {
    return {}
  },

  methods: {
    /**
     * mapMutations 调用mutation中的某个函数，数组每一项为调用的函数名
     * mapActions与mapMutations用法一致
     * mapGetters 调用Getters函数
     */
    ...mapMutations(["reduc", "reducN"]),
    ...mapActions(["reducAsync", "reducNAsync"]),
   
  },
  computed: {
    //state的第二种取值方式
    ...mapState(["count"]),
    ...mapGetters(["showNum"])
  }
}
</script>
<style></style>
